<template>
  <view class="indent">
    <view class="head_tops">
      <view class="head_ify" v-if="ifylist.length > 0">
        <view class="vis" v-for="(item, index) in ifylist" :key="index" @click="ifyFn(item.id)">
          {{ item.name }}
          <view v-if="ifyid == item.id"></view>
        </view>
      </view>
    </view>

    <view class="ul">
      <view class="li" v-for="(item, index) in shopList" :key="index" @click="detailsFn(item)">
        <view class="top">
          <!-- <view>{{item.sname}}</view> -->
          <view v-if="item.status == 1">已付定金</view>
          <view v-if="item.status == 2">待核销</view>
          <view v-if="item.status == 3">已签收</view>
          <view>{{ item.createTime }}</view>
        </view>
        <view class="bot">
          <image mode="widthFix" :src="item.productImage" />
          <view class="js">
            <view class="mc">
              {{ item.productName }}
            </view>
          </view>
          <view class="rig">
            <view>总价：¥{{ item.payPrice }}</view>
            <view>X{{ item.totalNum }}</view>
          </view>
        </view>
        <button @click.stop="payEnd(item)" v-if="item.status == 1" class="pay-btn">支付尾款</button>
      </view>
      <view class="list_bots" v-if="showLoadMore">{{ loadMoreText }}</view>
    </view>
  </view>
</template>

<script>
import { queryUserAll } from '@/utils/api.js';
import useHttp from '@/utils/http.js';

export default {
  data() {
    return {
      // 订单状态
      orderStatus: 2,

      navindex: 0,
      ifyid: 2,
      ifylist: [
        {
          id: 1,
          name: '已付定金',
        },
        {
          id: 2,
          name: '待核销',
        },
        {
          id: 3,
          name: '已签收',
        },
      ],
      shopList: [],
      wlList: [],
      bygList: [],
      loadMoreText: '加载中...',
      showLoadMore: false,
      wlloadMoreText: '加载中...',
      wlshowLoadMore: false,
      bygloadMoreText: '加载中...',
      bygshowLoadMore: false,
      // 最大值
      max: 5,
      // 页数
      current: 1,
      // 每页数量
      pageSize: 10,
    };
  },
  // 监听页面卸载
  onUnload() {
    (this.navindex = 0),
      (this.ifyid = 8),
      (this.max = 5),
      (this.shopList = []),
      (this.wlList = []),
      (this.bygList = []),
      (this.loadMoreText = '加载更多'),
      (this.showLoadMore = false);
    (this.wlloadMoreText = '加载更多'), (this.wlshowLoadMore = false);
    (this.bygloadMoreText = '加载更多'), (this.bygshowLoadMore = false);
    (this.current = 1), (this.pageSize = 10);
  },
  // 页面滚动到底部的事件
  onReachBottom() {
    console.log('onReachBottom');
    if (this.loadMoreText == '没有更多商品订单了!') {
      this.loadMoreText = '没有更多商品订单了!';
      return;
    }
    this.showLoadMore = true;
    this.current += 1;
    setTimeout(() => {
      this.setListData();
    }, 300);
  },
  onLoad() {
    this.initData();
  },
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    console.log('onPullDownRefresh');
    this.shopList = [];
    this.loadMoreText = '加载更多';
    this.showLoadMore = false;
    this.current = 1;
    this.pageSize = 10;
    this.initData();
  },
  methods: {
    async payEnd(order) {
      const _this = this;

      uni.showModal({
        title: '支付尾款',
        content: '确认支付尾款吗',
        success: async function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            if (order.channel == 0) {
              // 微信支付
              let res = await useHttp().post('/api/wxPayApplet/balancePayment', { orderId: order.orderId });

              uni.requestPayment({
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                paySign: res.data.paySign,
                signType: 'MD5',
                success: (result) => {
                  console.log('result', result);
                },
                fail: (error) => {
                  console.log('error', error);
                },
                complete: () => {
                  _this.current = 1;
                  _this.pageSize = 10;
                  _this.initData();
                },
              });
            } else if (order.channel == 2) {
              // 信用金
              let res = await useHttp().post('/api/home/balancePayment', { orderId: order.orderId });
              if (res.code == 200) {
                uni.showToast({
                  title: res.msg,
                  duration: 2000,
                  icon: 'none',
                });

                _this.current = 1;
                _this.pageSize = 10;
                _this.initData();
              }
            }
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    // 小类切换
    ifyFn(id) {
      this.ifyid = id;
      this.current = 1;
      this.pageSize = 10;
      this.initData();
    },
    // 获取数据
    initData() {
      // 获取商品订单数据
      queryUserAll({
        status: this.ifyid,
        pageNum: this.current,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            // console.log(res);
            this.shopList = res.data.orders;

            if (this.shopList.length < 10) {
              this.showLoadMore = true;
              this.loadMoreText = '没有更多商品订单了!';
            }

            uni.stopPullDownRefresh();
          } else {
            uni.showToast({ title: '请求错误', position: 'bottom' });
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom' });
        });
    },
    // 下拉加载数据
    setListData() {
      let data = [];
      // 获取商品订单数据
      queryUserAll({
        orderStatus: this.orderStatus,
        current: this.current,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            // console.log(res);
            data = res.data;
            if (data.length == 0) {
              this.current -= 1;
              this.showLoadMore = true;
              this.loadMoreText = '没有更多商品订单了!';
              return;
            } else if (data.length < 10) {
              this.showLoadMore = true;
              this.loadMoreText = '没有更多商品订单了!';
            }
            this.shopList = this.shopList.concat(data);
          } else {
            uni.showToast({ title: '请求错误', position: 'bottom' });
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom' });
        });
    },
    // 跳转商品订单详情
    detailsFn(item) {
      uni.navigateTo({
        url: '/pages/order/details?id=' + item.id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.pay-btn {
  min-width: 50rpx;
  height: 60rpx;
  outline: none;
  border: none;
  color: #098341;
  font-size: 24rpx;
  line-height: 60rpx;
}

.indent {
  // width: 100%;
  padding: 10px;

  .head_tops {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 80;

    .head_nav {
      height: 50px;
      background-color: #f8f8f8;
      border-top: 1px solid #f5f5f5;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: $mainText;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .vis {
        height: 50px;
      }

      .vis_act {
        font-size: 15px;
        font-weight: 600;
        color: #1c9e60;
        line-height: 50px;
      }
    }

    .head_ify {
      height: 50px;
      font-size: 14px;
      background-color: #f5f5f5;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $mainText;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .vis {
        height: 50px;
        position: relative;

        view {
          width: 20px;
          height: 2px;
          background: linear-gradient(232deg, #b9d378 0%, #1b9a5d 100%);
          border-radius: 3px;
          position: absolute;
          left: 30%;
          bottom: 20%;
        }
      }

      .vis:nth-child(2) {
        view {
          left: 18%;
          bottom: 20%;
        }
      }
    }
  }

  .ul {
    width: 100%;
    margin-top: 100rpx;

    .li {
      // height: 130px;
      background: #ffffff;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 0 10px;

      .top {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        view:nth-child(1) {
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: $mainText;
          line-height: 18px;
        }

        view:nth-child(2) {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
        }
      }

      .bot {
        display: flex;

        image {
          width: 70px;
          height: 70px !important;
          margin: 10px 10px 10px 0;
          border-radius: 4px;
        }

        .js {
          width: 50%;
          height: 70px;
          padding: 10px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .mc {
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: $mainText;
            line-height: 21px;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            /*要显示的行数*/
            -webkit-box-orient: vertical;
            margin-bottom: 10px;
          }

          .zj {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 16px;
          }
        }

        .rig {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
          width: 25%;
          text-align: right;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
      }

      .ddh {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $mainText;
        line-height: 30px;
      }
    }

    .list_bots {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: $mainText;
      line-height: 30px;
      text-align: center;
    }
  }

  .wldd {
    .li {
      .bot {
        .js {
          view {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: $text;
            line-height: 20px;

            // .sp1{
            // 	font-size: 18px;
            // 	font-weight: 600;
            // 	color: $mainText;
            // 	line-height: 30px;
            // }
            .sp2 {
              font-size: 16px;
              font-weight: 600;
              color: $mainText;
            }
          }
        }
      }

      .jl {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 25px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .bygdd {
    .li {
      // height: 160px;
      padding: 10px;

      .li_top {
        // height: 100px;
        border-bottom: 1px solid #f5f5f5;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $text;
        line-height: 30px;

        .head {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            width: 80%;
            display: flex;
            align-items: center;

            .ddzt {
              width: 50px;
              height: 20px;
              border-radius: 10px;
              opacity: 0.6;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }

            .zcd {
              background: linear-gradient(232deg, #b9d378 0%, #b9d378 100%);
            }

            .xcd {
              background: linear-gradient(232deg, #1b9a5d 0%, #1b9a5d 100%);
            }

            span {
              width: 75%;
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 600;
              color: $mainText;
              line-height: 30px;
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          view:nth-child(2) {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2ea167;
            line-height: 20px;
          }
        }

        .cont {
          display: flex;

          view {
            width: 33%;
          }
        }
      }

      .li_bot {
        .xx {
          height: 40px;
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .cz {
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .but {
            width: 80px;
            height: 30px;
            background: #f6f6f6;
            border-radius: 25px;
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #098341;
            line-height: 30px;
            text-align: center;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
